<template>
    <div>
      <div v-if="this.$store.state.manage">
           <!--1-->
            <el-row class="nav_a_top">
                <el-col :span="12"><div class="grid-content bg-purple">商品管理</div></el-col>
                <el-col :span="12"><div @click="addgoodsclick" class="grid-content bg-purple-light"><div class="nav_a_top_div">添加商品</div></div></el-col>
            </el-row>
            <!--2-->
            <form class="dingdan_form">
                    <input type="text" placeholder="手机号">
                    <select class="nav_sel">
                        <option value="">合作公司1</option>
                        <option value="">合作公司2</option>
                    </select> 
                    <select class="nav_sel">
                        <option value="">状态1</option>
                        <option value="">状态2</option>
                    </select>
                    <button class="dingdan_form_shaixuan">筛选</button>
                </form>
            <!--3-->
            <table class="nav_a_table fs12">
                        <tr>
                            <td>ID</td>
                            <td>名称</td>
                            <td>价格</td>
                            <td>图片</td>
                            <td>说明</td>
                            <td>销售时间</td>
                            <td>所属厨房</td>
                            <td>状态</td>
                            <td>归属货架</td>
                            <td>操作</td>
                        </tr>
                        <tr>
                            <td>001</td>
                            <td>麻辣小姐姐</td>
                            <td>20.00元/份</td>
                            <td>2017-09-12 16：20</td>
                            <td></td>
                            <td></td>
                            <td>2017-11-20</td>
                            <td>美地星球</td>
                            <td>正常</td>
                            <td><button class="nav_a_button">修改</button><button class="nav_a_button">停用</button><button class="nav_a_button">清洁</button></td>
                        </tr>
            </table>
      </div>
      <div v-if="this.$store.state.add">
        <addgoods></addgoods>
      </div>
    </div>
</template>
<script>
    import addgoods from './cangui_addshangpin.vue'
    export default{
        name:"spgl",
        data(){
            return{
                manage:true,
                add:false,
            }
        },
        methods:{
            onSubmit:function(){
                
            },
            addgoodsclick:function(){
                this.$store.state.manage=false,
                this.$store.state.add=true
                console.log("===")
            },
        },
        components:{
            addgoods,
        }
    }
</script>
<style scoped>
/*1*/
.nav_a_top{height: 40px;background-color: white;padding: 10px;}
.nav_a_top>div:nth-child(2){text-align: center;}
.nav_a_top_div{width: 100px;float: right;border: 1px solid #A9A9A9;}
/*2*/
/*2*/
.dingdan_form{margin: 25px 0px 45px 0px;}
.dingdan_form input{padding: 4px 0px 4px 7px;}
.nav_sel{padding: 4px 0px 4px 7px;box-sizing: border-box;width: 181px;margin-left: 10px;position:relative ;top:2px;}
.dingdan_form_shaixuan{background-color: white;border: 1px solid #bbb;width: 80px;height: 30px;display: inline-block;border-radius: 7px;margin-left: 10px;background-color: #bbb;}
/*3*/
.nav_a_table{width: 100%}
.nav_a_table>tr:nth-child(1) td{padding: 15px 20px;background-color: #cdcdcd;border: 1px solid #bbbbbb;box-sizing: border-box;text-align: center}
.nav_a_table>tr:nth-child(2) td{padding: 15px 20px;background-color: white;border: 1px solid #bbbbbb;box-sizing: border-box;}
.nav_a_button{padding: 3px;box-sizing: border-box;margin-right:5px;}
.nav_a_table table{padding: 3px;}
</style>